// 思路同register是一样的 
function LoginModal(){
    this.createDom();
    // 登录模态框的监听事件
    this.addListener();
    // 生成验证码
    this.genCode();
}
LoginModal.ModalTemplate=`<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">用户登录</h4>
    </div>
    <div class="modal-body">
      <!-- 这个用bootstrap的表单 -->
      <div class="alert alert-danger hidden login-error">用户名或密码错误</div>
      <form class="form-login">
          <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" name="username" class="form-control" id="loginuser" placeholder="输入用户名">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" name="password" class="form-control" id="loginpassword" placeholder="输入密码">
          </div>
          <div class="form-group">
            <label for="logincode">验证码</label>
            <input type="text"  class="form-control input-code" id="loginCode" placeholder="输入验证码">
            <div class="code"></div>
          </div>
          
            
          
         
         
        </form>
    </div>
    <div class="modal-footer">
      
      <button type="button" class="btn btn-primary btn-login">登录</button>
    </div>
  </div>
</div>
</div>`
LoginModal.prototype={
    createDom(){
        $("body").append(LoginModal.ModalTemplate);
    },
    addListener:function(){
      // 读取登录表单中的数据jQuery的serialize方法
      // var data=$(".form-login").serialize();
      // 连接url进行登录的验证
      // 这里有几个事件的监听，登录的数据验证，验证码的产生，验证码的校验
      $(".btn-login").on("click",this.loginHandler);
      $(".code").on("click",this.genCode);
      $(".input-code").on("blur",this.codeHandler);

    },
    loginHandler(){
      // 登录的用户名与密码
      const data=$(".form-login").serialize();
      // 请求api接口实现用户名跟密码的验证
      var url="http://rap2api.taobao.org/app/mock/86567/api/users/login";
      $.post(url,data,function(data){
        if(data.res_body.status===1){
          // 登录成功
          // 保存登录成功的用户名
          sessionStorage.username=data.res_body.data.username;
          //刷新页面
          location.reload();
        }else{
          // 登录失败
            $(".login-error").removeClass("hidden");
        }
      },"json")
    },
    // 生成验证码
    genCode:function(){
      // 关于get中的路径不是很清楚？
      $.getJSON("/api/captcha",function(data){
        $(".code").html(data.res_body.data);
      });
    },
    // 检验用验证码
    codeHandler:function(event){
      // 校验验证码跟事件源元素有关
      // 输入的值
      const code=$(event.target).val();
      // ajax发送请求进行验证
      // 为什么是对象{code}
      $.getJSON("/api/captcha/verify",{code},function(data){
        if(data.res_body.valid){
          alert("正确");
        }else{
          alert("错误");
        };

      })
  

    }
}
